<template>
    <div class="bac-container-none-padding user-details-container">
        <div class="bac-container-title">基础信息</div>
        <el-form ref="userForm" label-position="right" size="small " label-width="80px" :model="userDetails"
                 :rules="userRules"
                 v-loading="loading">
            <el-form-item label="姓名" prop="realName">
                <el-input v-model="userDetails.realName"></el-input>
            </el-form-item>
            <el-form-item label="简介" prop="synopsis">
                <el-input type="textarea" v-model="userDetails.synopsis" :rows="5"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-radio-group v-model="userDetails.sex">
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="0">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="公司" prop="company">
                <el-input v-model="userDetails.company"></el-input>
            </el-form-item>
            <el-form-item label="职位" prop="profession">
                <el-input v-model="userDetails.profession"></el-input>
            </el-form-item>
            <el-form-item label="所属行业" prop="industryCategory">
                <el-cascader
                        v-model="userDetails.industryCategory"
                        @change="changeIndustryCategory"
                        :options="industryCategoryData"
                        :props="{ expandTrigger: 'hover',value:'code',label:'name',children:'sublist' }"></el-cascader>
            </el-form-item>
            <el-form-item label="地区">
                <el-cascader
                        ref="areaRef"
                        v-model="area"
                        @change="changArea"
                        :options="areaData"
                        :props="{ expandTrigger: 'hover',value:'code',label:'name',children:'sublist'}">
                </el-cascader>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="save" :loading="btnLoading">保存</el-button>
                <el-button plain>取消</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>
<script>
    import common from '@/api/common';

    export default {
        data: function () {
            return {
                loading: false,
                btnLoading: false,
                userDetails: {},
                industryCategoryData: [],
                area: [],
                areaData:[],
                userRules: {
                    realName: [
                        {required: true, message: '请输入您的姓名', trigger: 'blur'},
                        {min: 2, max: 15, message: '姓名长度不正确', trigger: 'blur'}
                    ],
                    synopsis: [
                        {min: 1, max: 500, message: '最大500个字符', trigger: 'blur'}
                    ],
                    sex: [
                        {required: true, message: '请选择您的性别', trigger: 'blur'}
                    ],
                    company: [
                        {min: 2, max: 20, message: '公司长度不正确', trigger: 'blur'}
                    ],
                    profession: [
                        {min: 2, max: 20, message: '职位长度不正确', trigger: 'blur'}
                    ],
                    industryCategory: [
                        {required: true, message: '请选择所属行业', trigger: 'blur'}
                    ]


                }
            }
        },
        methods: {
            getUserInfo() {
                this.loading = true;
                this.$get("/user/details/getUserInfo").then((res) => {
                    this.userDetails = res.data;
                    if (this.userDetails.subCategoryCode != null && this.userDetails.subCategoryCode != "") {
                        this.userDetails.industryCategory = this.userDetails.subCategoryCode;
                    } else {
                        this.userDetails.industryCategory = this.userDetails.parentCategoryCode;
                    }
                    this.area = [this.userDetails.provinceCode, this.userDetails.cityCode]
                    sessionStorage.setItem("userInfo", JSON.stringify(res.data));
                    this.loading = false;
                }).catch(err => {
                    console.log(err)
                    sessionStorage.removeItem("userInfo");
                    this.loading = false;
                })
            },
            save() {
                this.$refs['userForm'].validate((valid) => {
                    if (valid) {
                        this.btnLoading = true;
                        this.$post("/user/details/update", this.userDetails).then(res => {
                            this.$notify({offset: 60, title: '成功', message: "修改成功", type: 'success'})
                            this.btnLoading = false;
                            sessionStorage.removeItem("userInfo");
                            //修改夫组件方法
                            this.$emit('changeDegree')
                        }).catch((err) => {
                            this.btnLoading = false;
                        });
                    }
                });
            },
            getData() {
                common.industryCategoryQueryAll().then(res => {
                    this.industryCategoryData = res.data;
                });
                common.areaQueryAll().then(res => {
                    this.areaData = res.data;
                });

            },
            changArea(itemList) {
                let provinceCode = "";
                let provinceName = "";
                let cityCode = "";
                let cityName = "";
                this.areaData.forEach(d => {
                    if (itemList[0] == d.code) {
                        provinceCode = d.code;
                        provinceName = d.name;
                        if (itemList.length > 1 && d.sublist != undefined) {
                            d.sublist.forEach(sub => {
                                if (sub.code == itemList[1]) {
                                    cityCode = sub.code;
                                    cityName = sub.name;
                                }
                            })
                        }

                        return;
                    }
                });
                this.userDetails.provinceCode = provinceCode;
                this.userDetails.provinceName = provinceName;
                this.userDetails.cityCode = cityCode;
                this.userDetails.cityName = cityName;

            }
            ,
            changeIndustryCategory(itemList) {
                let parentCategoryCode = null;
                let parentCategoryName = null;
                let subCategoryCode = "";
                let subCategoryName = "";

                this.industryCategoryData.forEach(d => {
                    if (itemList[0] == d.code) {
                        parentCategoryCode = d.code;
                        parentCategoryName = d.name;
                        if (itemList.length > 1 && d.sublist != undefined) {
                            d.sublist.forEach(sub => {
                                if (sub.code == itemList[1]) {
                                    subCategoryCode = sub.code;
                                    subCategoryName = sub.name;
                                }
                            })
                        }

                        return;
                    }
                });

                this.userDetails.parentCategoryCode = parentCategoryCode;
                this.userDetails.parentCategoryName = parentCategoryName;
                this.userDetails.subCategoryCode = subCategoryCode;
                this.userDetails.subCategoryName = subCategoryName;
            }
        },
        mounted() {
            this.getUserInfo();
            this.getData();

        }
    }
</script>

<style>
    .user-details-container .el-form {
        width: 50%;
        margin: 20px 0 50px 180px;
    }

</style>